import React, { useState, useEffect, useRef } from 'react';
import './openPage.css';
import Header from '../Header/Header';
import Modal from '../../components/Modal/Modal';

// 导入 fj.png 作为背景图片
import roomImg from '../../assets/login/fj.png';

// 导入弹框图片
import csmqzImg from '../../assets/login/csmqz.png';

/**
 * OpenPage 页面组件
 */
const OpenPage = ({ onNextPage, onGoToPackPage }) => {
    // 滑动检测状态
    const [touchStartY, setTouchStartY] = useState(0);
    const [touchEndY, setTouchEndY] = useState(0);

  // 弹框状态 - 默认打开
  const [isModalOpen, setIsModalOpen] = useState(true);

    // 打开弹框
    const handleOpenModal = () => {
        setIsModalOpen(true);
    };

    // 关闭弹框
    const handleCloseModal = () => {
        setIsModalOpen(false);
    };


    // 处理触摸开始
    const handleTouchStart = (e) => {
        setTouchStartY(e.touches[0].clientY);
    };

    // 处理触摸移动
    const handleTouchMove = (e) => {
        setTouchEndY(e.touches[0].clientY);
    };

    // 处理触摸结束 - 检测向上滑动
    const handleTouchEnd = () => {
        const swipeDistance = touchStartY - touchEndY;
        const minSwipeDistance = 50; // 最小滑动距离

        // 如果向上滑动距离足够大，则切换到下一页
        if (swipeDistance > minSwipeDistance && onNextPage) {
            onNextPage();
        }

        // 重置触摸位置
        setTouchStartY(0);
        setTouchEndY(0);
    };



    return (
        <div
            className="room-page"
            style={{
                backgroundImage: `url(${roomImg})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat',
                width: '100%',
                height: '100vh',
                position: 'relative'
            }}
        >
            <div
                className="room-page-content"
                onTouchStart={handleTouchStart}
                onTouchMove={handleTouchMove}
                onTouchEnd={handleTouchEnd}
            >
                {/* 顶部元素 */}
                <Header />

          {/* 弹框组件 */}
          <Modal 
            isOpen={isModalOpen} 
            onClose={handleCloseModal}
            onButtonClick={onGoToPackPage}
          >
            <img 
              src={csmqzImg} 
              alt="弹框图片" 
              className="modal-image"
            />
          </Modal>

            </div>
        </div>
    );
};

export default OpenPage;